<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="age">
        <p>{{msg}}</p>
        <hr>
        <input type="text" v-model="colorVal">
        <p>watch、computed、methods的区别：</p>
        <p>多对一：多个因素共同作用下得出一个数据---computed</p>
        <p>一对多：牵一发而动全身----watch，监听核心因素的变化，采取行动</p>
        <p>函数没有缓存，调用时就立即执行。computed会将计算结果缓存在内容中，方便下次使用。</p>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                age: 10,
                msg: '',
                colorVal: 80 // 颜值
            },
            // 监听,当侦听的数据变化时，函数自动执行
            watch: {
                age(val1, val2) {
                    // console.log(val1, val2);
                    if(val1<18) {
                        this.msg = '未成年人禁止入内'
                    }else if(val1>=18 && val1<60) {
                        this.msg = '你已经是成年人了，可以做一些成年人才能做的事了。。。'
                    }else {
                        this.msg = 'BBQ了吧'
                    }
                },
                colorVal(v) {// 根据颜值的变化，体验世界的参差
                    if(v<85) {
                        console.log('小家碧玉');
                    }else if(v>=85 && v<90) {
                        console.log('yyqx为你回头');
                    }else if(v>=90 && v<95) {
                        console.log('yyqx要和你官宣');
                    }else {
                        console.log('weibo热搜');
                        console.log('后端程序员加班');
                        console.log('司机也加班');
                    }
                }
            }
        })
    </script>
</body>
</html>